<template>
  <headPage :tabsIndex="1"></headPage>
  <div class="main_box">
    <div class="professional">
      <div class="classification">
        <div class="class_title">课程专区：</div>
        <div class="class_type">
          <div
            @click="select1(item.aid)"
            class="class_type_item"
            :class="freecoursezone_id == item.aid ? 'active_item' : ''"
            v-for="(item, index) in courseZone"
            :key="index"
          >
            {{ item.zhuanqumingcheng }}
          </div>
        </div>
      </div>
      <div class="classification">
        <div class="class_title">专业：</div>
        <div class="class_type">
          <div
            @click="select2(item.aid)"
            class="class_type_item"
            :class="major_id == item.aid ? 'active_item' : ''"
            v-for="(item, index) in majorTabs"
            :key="index"
          >
            {{ item.zhuanyemingcheng }}
          </div>
        </div>
      </div>
      <div class="classification">
        <div class="class_title">课程：</div>
        <div class="class_type">
          <div
            @click="select3(item.aid)"
            class="class_type_item"
            :class="categories_id == item.aid ? 'active_item' : ''"
            v-for="(item, index) in categoriesTabs"
            :key="index"
          >
            {{ item.leimumingcheng }}
          </div>
        </div>
      </div>
    </div>

    <div class="courseList" v-loading="loading">
      <template v-for="(item, index) in courseList" :key="index">
        <courseItem :item="item"></courseItem>
      </template>
      <div class="no_data" v-if="courseList.length == 0 && !loading">
        <img class="no_img" src="../../assets/default/12.png" alt="" />
      </div>
    </div>
    <div class="margin_top">
        <paging
          :total="total"
          :pageSize="pageSize"
          @pageChange="pageChange"
        ></paging>
      </div>
  </div>
  <footerPage></footerPage>
</template>

<script setup name="major">
import {
  post65e5ad8b90b04,
  post65e5adabd1a1b,
  post65e5adcfe1dbb,
  post65e5aef540ec5,
} from "@/utils/api.js";
import { ref, reactive, onMounted } from "vue";
import headPage from "@/components/headPage.vue";
import footerPage from "@/components/footerPage.vue";
import courseItem from "@/components/courseItem.vue";
import paging from "@/components/paging.vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

onMounted(() => {
  getCourseZone();
  getMajor();
  courseCategories();
});
// 获取课程专区
let courseZone = ref([]);
let freecoursezone_id = ref(0); // 课程专区id
function getCourseZone() {
  post65e5ad8b90b04({})
    .then((res) => {
      // console.log(res);
      if (res.code == 1) {
        courseZone.value = res.data;
        if (courseZone.value.length > 0) {
          courseZone.value.unshift({
            aid: -1,
            zhuanqumingcheng: "全部",
          });
          freecoursezone_id.value = courseZone.value[0].aid;
        }
      }
    })
    .catch((err) => {});
}
function select1(aid) {
  freecoursezone_id.value = aid;
  pageNum.value = 1;
  loading.value = true;
  getList();
}

// 获取专业分类  post65e5adabd1a1b
let majorTabs = ref([]);
let major_id = ref(0); // 专业分类id
function getMajor() {
  post65e5adabd1a1b({})
    .then((res) => {
      // console.log(res);
      if (res.code == 1) {
        majorTabs.value = res.data;
        if (majorTabs.value.length > 0) {
          majorTabs.value.unshift({
            aid: -1,
            zhuanyemingcheng: "全部",
          });
          if (route.query.id) {
            major_id.value = route.query.id;
          } else {
            major_id.value = majorTabs.value[0].aid;
          }
          getList();
        }
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
function select2(aid) {
  major_id.value = aid;
  pageNum.value = 1;
  loading.value = true;
  getList();
}

// 获取课程类目  post65e5adcfe1dbb
let categoriesTabs = ref([]);
let categories_id = ref(0); // 课程类目id
function courseCategories() {
  post65e5adcfe1dbb({})
    .then((res) => {
      //   console.log(res);
      if (res.code == 1) {
        categoriesTabs.value = res.data;
        if (categoriesTabs.value.length > 0) {
          categoriesTabs.value.unshift({
            aid: -1,
            leimumingcheng: "全部",
          });
          categories_id.value = categoriesTabs.value[0].aid;
        }
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
function select3(aid) {
  categories_id.value = aid;
  pageNum.value = 1;
  loading.value = true;
  getList();
}

// 课程列表
let courseList = reactive([]);
let total = ref(0);
let loading = ref(true);
let pageNum = ref(1);
let pageSize = ref(10);
function getList() {
  post65e5aef540ec5({
    page: pageNum.value,
    list_rows: pageSize.value,
    freecoursezone_id:
      freecoursezone_id.value == -1 ? "" : freecoursezone_id.value,
    freeprofessionalmanagement_id: major_id.value == -1 ? "" : major_id.value,
    freecoursecategories_id:
      categories_id.value == -1 ? "" : categories_id.value,
  }).then((res) => {
    // console.log(res);
    if (res.code == 1) {
      loading.value = false;
      total.value = res.data.total;
      courseList = res.data.data;
    }
  });
}

// 分页
function pageChange(page) {
  pageNum.value = page;
  loading.value = true;
  getList();
}
</script>

<style lang="scss" scoped>
.no_data_view {
  margin-top: 0;
}
.professional {
  margin-top: 110px;
  background: #fff;
  padding: 16px 14px 0px 14px;
  margin-bottom: 16px;
  .classification {
    display: flex;
    // align-items: center;
    .class_title {
      width: 45px;
      margin-right: 12px;
      font-size: 9px;
      margin-bottom: 16px;
      padding: 5.5px 0;
      text-align: right;
      font-weight: 500;
    }
    .class_type {
      width: calc(100% - 57px);
      overflow: hidden;

      .class_type_item {
        float: left;
        margin-right: 12px;
        font-size: 9px;
        margin-bottom: 16px;
        padding: 5.5px 5px;
        border-radius: 3px;
        background: #fff;
        cursor: pointer;
      }
      .active_item {
        font-size: 9px;
        margin-bottom: 16px;
        padding: 5.5px 5px;
        border-radius: 3px;
        background: #1f52ae;
        color: #fff;
      }
    }
  }
}
.courseList {
  overflow: hidden;
  min-height: 220px;
}
.margin_top {
  margin-bottom: 24px;
}
</style>